window.onload = function() {
    var oBoxs = $('.box'), // 这些变量必须设置为全局的
        oMain = $('#main')[0],
        oBoxWidth = oBoxs[0].offsetWidth,
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth),
        columnHeightList = [];

    waterfall(oBoxs, oBoxWidth, columnNum, 0, columnHeightList);

    window.onresize = function() {
        oBoxWidth = oBoxs[0].offsetWidth;
        columnNum = Math.floor(document.body.clientWidth / oBoxWidth);
        columnHeightList = [];
        waterfall(oBoxs, oBoxWidth, columnNum, 0, columnHeightList);
    }

    window.onscroll = function() {
        // 避免触发多次事件加载过多图片
        clearTimeout(handleScroll.tID);
        handleScroll.tID = setTimeout(function() {
            handleScroll();
        }, 100);
    }


    // 处理滚动事件，判断是否加载图片
    function handleScroll() {
        var lastBox = oBoxs[oBoxs.length - 1];
        // 使用transform，则offsetTop获取不到！
        // var lastBoxTop = lastBox.offsetTop; // 距离页面顶部的高度
        var top = lastBox.style.top;
        var oldPicLen = $('.box').length;
        if(top) {
            top = parseInt(top.replace('px',''));
        } else {
            top = 0;
        }
        var lastBoxTop = getTransform(lastBox).transY + top;

        console.log('transY',getTransform(lastBox).transY)
        console.log(lastBox.style.top)
        var lastBoxHeight = lastBox.offsetHeight; // 自身高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度


        console.log('(scrollTop + bodyHeight)', (scrollTop + bodyHeight))
        console.log('lastBoxTop + lastBoxHeight / 2', (lastBoxTop + lastBoxHeight / 2))

        // 加载图片的条件
        if ((scrollTop + bodyHeight) > (lastBoxTop + lastBoxHeight / 4)) {
            loadImg(oMain, function() {
                oBoxs = $('.box');
                waterfall(oBoxs, oBoxWidth, columnNum, oldPicLen, columnHeightList);
            });
        }
    }
}

/**
 * 瀑布流函数
 * @param  {[type]} $oBoxs     图片box数组
 * @param  {[type]} oBoxWidth 图片box宽度
 * @param  {[type]} columnNum 图片列数
 * @param  {[type]} i         第i张图片起调整成瀑布流布局
 * @param  {[type]} columnHeightList 存放列高度的数组
 */
function waterfall(oBoxs, oBoxWidth, columnNum, i, columnHeightList) {
    var targetIndex = 0;
    for (; i < oBoxs.length; i++) {
        var box = oBoxs[i];
        if (i < columnNum) { // 第一行图片
            columnHeightList.push(box.offsetHeight)
            box.style.transform = 'translate(' + oBoxWidth * i + 'px,0px)';
        } else { // 其余图片
            // 获取高度最低的那一列序号
            targetIndex = columnHeightList.indexOf(Math.min.apply(null, columnHeightList));

            // 注意加单位啊！！！
            console.log(box.style.top)
            var y = columnHeightList[targetIndex]-box.style.top.replace('px','');
            console.log('y',y)
            box.style.transform = 'translate(' + targetIndex * oBoxWidth + 'px,' + y + 'px)';

            // box.style.transform = 'translate(' + targetIndex * oBoxWidth + 'px,' + columnHeightList[targetIndex] + 'px)';

            console.log('offsetHeight', box.offsetHeight)
            columnHeightList[targetIndex] += box.offsetHeight;
        }
    }
}


// 将图片包装成box后，加载到mainDiv中
function loadImg(mainDiv, cb) {
    var imgData = { data: [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' },{ 'src': '4.jpg' }, { 'src': '5.jpg' }, { 'src': '6.jpg' }] };
    var prefix = '../../source/image/';
    var imgLen = imgData.data.length;

    imgData.data.forEach(function(val, index) {
        var oPic = document.createElement('div');
        oPic.className = 'pic';
        var oBox = document.createElement('div');
        oBox.className = 'box';
        var img = document.createElement('img');
        img.src = prefix + val.src;

        oPic.appendChild(img);
        oBox.appendChild(oPic);
        mainDiv.appendChild(oBox);


        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度
        console.log('加载图片')
        // 解决图片加载过长时下降速度过快
        oBox.style.left = '0';
        oBox.style.top = 20+'px';
        oBox.style.top = scrollTop-bodyHeight+'px';

        // 让所有图片加载完后执行回调，避免新加进来的图片高度获取不到，产生叠加
        img.onload = function() {
            if (!--imgLen) {
                console.log('执行图片回调')
                cb();
            }
        };
    });
}

// 选择器函数
function $(selector) {
    return document.querySelectorAll(selector);
}


// 获取元素的translateX和translateY数值，传入一个dom元素，
// 返回一个对象，含属性transX和transY
function getTransform(dom) {
    var transform = window.getComputedStyle(dom).transform;
    if(transform == 'none') {
        console.log('还没transform');
        return {
            'tranX':0,
            'tranY':0
        };
    }
    var tempArr = transform.split(',');
    return {
        'transX': parseInt(tempArr[4]),
        'transY': parseInt(tempArr[5].substring(0, tempArr[5].length - 1))
    }
}
